<template>
	<!-- 添加项目 -->
	<view class="apply-pages" v-if="isLoad">
		
		<view class="apply-form pl-lg pr-lg">
			<view class="fill-base mt-md radius-16">
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">服务名称</view>
					<input v-model="form.title" type="text" class="item-input flex-1" maxlength="20"
						:placeholder="rule[0].errorMsg" />
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">副标题</view>
					<input v-model="form.sub_title" type="text" class="item-input flex-1" maxlength="20"
						:placeholder="rule[1].errorMsg" />
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">服务价格</view>
					<input v-model="form.price" type="digit" class="item-input flex-1"
						:placeholder="rule[2].errorMsg" />
						<view class="item-text">元</view>
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">服务原价</view>
					<input v-model="form.init_price" type="digit" class="item-input flex-1"
						:placeholder="rule[3].errorMsg" />
						<view class="item-text">元</view>
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">减免价格</view>
					<input v-model="form.init_price - form.price" type="digit" disabled class="item-input flex-1"
						placeholder="填入服务价格和原价后,自动生成" />
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">虚拟销售量</view>
					<input v-model="form.sale" type="digit" class="item-input flex-1"
						:placeholder="rule[4].errorMsg" />
						<view class="item-text">人选择</view>
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">服务时长</view>
					<input v-model="form.time_long" type="digit" class="item-input flex-1"
						placeholder="一次服务的时间段" />
						<view class="item-text">分钟</view>
				</view>
				<view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">返佣金额</view>
					<input v-model="form.com_balance" type="digit" class="item-input flex-1"
						placeholder="实际支付金额的百分比" />
						<view class="item-text">%</view>
				</view>
				<!-- <view class="flex-between ml-lg mr-lg b-1px-b">
					<view class="item-text">排序值</view>
					<input v-model="form.top" type="number" class="item-input flex-1"
						placeholder="值越大,排序越靠前" />
				</view> -->
				<!-- <view class="flex-between pl-lg pr-lg b-1px-b">
					<view class="item-text">行业类目</view>
					<view class="item-input text">
						<picker mode="multiSelector" range-key="name" @columnchange="colChange" :range="classList">
							<view style="height: 36px;line-height: 36px;">
						        {{one_classid_name + '-' + two_classid_name}}
						    </view>
						</picker>
					</view>
				</view> -->
				<view class="flex-warp pl-lg pr-lg">
					<view class="item-text">绑定服务</view>
					<view class="item-input text">
						<checkbox-group @change="technicianChange">
							<view v-for="(item, ind) in technicianList" :key="item.id" class="selectItem" style="">
								<view class="flex-between" style="float: left;">
									<checkbox :value="item.coach_name" />
									<view>{{item.coach_name}}</view>
								</view>
							</view>
						</checkbox-group>
					</view>
				</view>
				<view class="pl-lg pr-lg pt-md b-1px-b">
					<view >(请先添加个人  申请服务   后才可以使用此项)</view>
				</view>
			</view>
			<view class="fill-base mt-md radius-16">
				<view class="flex-between pl-lg pr-lg">
					<view class="item-text">封面图</view>
					<input :disabled="true" type="text" class="item-input flex-1" />
				</view>
				<view class="flex-between pl-lg pr-lg pb-md">
					<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.cover" filetype="picture"
						imgtype="cover" text="上传图片" :imgsize="1">
					</upload>
				</view>
			</view>
			<view class="fill-base mt-md radius-16">
				<view class="flex-between pl-lg pr-lg">
					<view class="item-text">展示图</view>
					<input :disabled="true" type="text" class="item-input flex-1" />
				</view>
				<view class="flex-between pl-lg pr-lg pb-md">
					<upload @upload="imgUpload2" @del="imgUpload2" :imagelist="imgs_photo" filetype="picture"
						imgtype="imgs" text="上传图片" :imgsize="5">
					</upload>
				</view>
			</view>
			<view class="fill-base mt-md radius-16">
				<view class="fill-base mt-md radius-16">
					<textarea v-model="form.introduce" class="item-textarea pd-lg" maxlength="100" placeholder="请输入项目介绍" />
					<view class="text-right pb-lg pr-lg">
						{{form.introduce.length>100?100:form.introduce.length}}/100
					</view>
				</view>
			</view>
			<view class="fill-base mt-md radius-16">
				<view class="fill-base mt-md radius-16">
					<textarea v-model="form.explain" class="item-textarea pd-lg" maxlength="100" placeholder="请输入禁忌说明" />
					<view class="text-right pb-lg pr-lg">
						{{form.explain.length>100?100:form.explain.length}}/100
					</view>
				</view>
			</view>
			<view class="fill-base mt-md radius-16">
				<view class="fill-base mt-md radius-16">
					<textarea v-model="form.notice" class="item-textarea pd-lg" maxlength="100" placeholder="请输入下单须知" />
					<view class="text-right pb-lg pr-lg">
						{{form.notice.length>100?100:form.notice.length}}/100
					</view>
				</view>
			</view>
			
		</view>

		<view class="space-max-footer"></view>

		<fix-bottom-button @cancel="toDel" @confirm="submit" :text="textArr" bgColor="#fff"></fix-bottom-button>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import $api from '@/api/index.js';
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {},
				textArr: [{
					text: '删除',
					type: 'cancel'
				}, {
					text: '提交',
					type: 'confirm'
				}],
				form: {
					id: 0,
					title: '',
					sub_title: '',
					price: '',
					init_price: '',
					sale: '',
					time_long: '',
					com_balance: '',
					top: '',
					one_classid: '6',
					two_classid: '272',
					introduce: '' ,
					explain: '',
					notice: '',
					coach: [], // 关联技师的id，数组字符
					cover: '', // 封面图
					imgs: '' // 轮播图
				},
				one_classid_name: '交友',
				two_classid_name: '真诚',
				imgs_photo: [], // 展示图

				rule: [
					{
						name: "title",
						checkType: "isNotNull",
						errorMsg: "请输入服务名称"
					},
					{
						name: "sub_title",
						checkType: "isNotNull",
						errorMsg: "请输入副标题"
					},
					{
						name: "price",
						checkType: "isNotNull",
						errorMsg: "请输入服务价格"
					},
					{
						name: "init_price",
						checkType: "isNotNull",
						errorMsg: "请输入服务原价"
					},
					{
						name: "sale",
						checkType: "isNotNull",
						errorMsg: "请输入销售量    输入已经销售的数量。    1-50单数量"
					},
					{
						name: "time_long",
						checkType: "isNotNull",
						errorMsg: "请输入服务时长"
					},
					{
						name: "com_balance",
						checkType: "isNotNull",
						errorMsg: "请输入返佣金额"
					},
					// {
					// 	name: "top",
					// 	checkType: "isNotNull",
					// 	errorMsg: "请输入排序值"
					// },
				],
				lockTap: false,
				classList1: [
					{
						id: 6,
						name: "交友",
						image: "/static/main/01.png",
						path: "/service/pages/user-list?id=6",
					},
					{
						id: 2,
						name: "心灵",
						image: "/static/main/02.png",
						path: "/service/pages/user-list-other?id=2",
					},
					{
						id: 273,
						name: "疗愈",
						image: "/static/main/03.png",
						path: "/service/pages/user-list-other?id=273",
					},
					{
						id: 252,
						name: "娱乐",
						image: "/static/main/04.png",
						path: "/service/pages/user-list-other?id=252",
					},
					{
						id: 1,
						name: "课堂",
						image: "/static/main/05.png",
						path: "/service/pages/user-list-other?id=1",
					},
					{
						id: 14,
						name: "美食",
						image: "/static/main/06.png",
						path: "/service/pages/user-list-other?id=14",
					},
					{
						id: 7,
						name: "养生",
						image: "/static/main/07.png",
						path: "/service/pages/user-list-other?id=7",
					},
					{
						id: 3,
						name: "医美",
						image: "/static/main/08.png",
						path: "/service/pages/user-list-other?id=3",
					},
					{
						id: 16,
						name: "休闲",
						image: "/static/main/09.png",
						path: "/service/pages/user-list-other?id=16",
					},
					{
						id: 11,
						name: "食疗",
						image: "/static/main/10.png",
						path: "/service/pages/user-list-other?id=11",
					},
					{
						id: 10,
						name: "家政",
						image: "/static/main/11.png",
						path: "/service/pages/user-list-other?id=10",
					},
					{
						id: 17,
						name: "自媒体",
						image: "/static/main/12.png",
						path: "/service/pages/user-list-other?id=17",
					},
					{
						id: 15,
						name: "创业",
						image: "/static/main/13.png",
						path: "/service/pages/user-list-other?id=15",
					},
					{
						id: 287,
						name: "健身",
						image: "/static/main/14.png",
						path: "/service/pages/user-list-other?id=287",
					},
					{
						id: 253,
						name: "电影",
						image: "/static/main/15.png",
						path: "/service/pages/user-list-other?id=253",
					},
					{
						id: 284,
						name: "汽车",
						image: "/static/main/16.png",
						path: "/service/pages/user-list-other?id=284",
					},
					{
						id: 58,
						name: "科技",
						image: "/static/main/17.png",
						path: "/service/pages/user-list-other?id=58",
					},
					{
						id: 13,
						name: "旅游",
						image: "/static/main/18.png",
						path: "/service/pages/user-list-other?id=13",
					},
					{
						id: 286,
						name: "首饰",
						image: "/static/main/19.png",
						path: "/service/pages/user-list-other?id=286",
					},
					{
						id: 5,
						name: "酒店",
						image: "/static/main/21.png",
						path: "/service/pages/user-list-other?id=5",
					},
					{
						id: 289,
						name: "减肥",
						image: "/static/main/20.png",
						path: "/service/pages/user-list-other?id=289",
					},
					{
						id: 285,
						name: "房产",
						image: "/static/main/22.png",
						path: "/service/pages/user-list-other?id=285",
					},
					{
						id: 12,
						name: "维修服务",
						image: "/static/main/23.png",
						path: "/service/pages/user-list-other?id=12",
					},
					{
						id: 288,
						name: "康复理疗",
						image: "/static/main/24.png",
						path: "/service/pages/user-list-other?id=288",
					},
					{
						id: 18,
						name: "其它",
						image: "/static/main/25.png",
						path: "/service/pages/user-list-other?id=18",
					},
				],
				classList2: [],
				classList: [],
				selectedItem: {},
				technicianList: []
				
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
		}),
		onLoad(options) {
			this.options = options
			this.initIndex()
		},
		methods: {
			async initIndex() {
				let {
					id
				} = this.options
				this.id = id
				uni.setNavigationBarTitle({
					title: id ? `编辑项目` : `添加项目`
				})
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				
				if (!id) {
					this.isLoad = true
				}
				
				this.classList[0] = this.classList1
				// 强制视图更新
				this.$set(this.classList, 0, this.classList1)
				let list = await this.$api.service.classList({
					class_id: this.classList[0][0].id
				});
				
				this.classList[1] = list
				// debugger
				// 强制视图更新
				this.$set(this.classList, 1, list)
				
				let detail = await this.$api.technician.userServiceList({});
				this.technicianList = detail
				
				if (!id) {
					this.textArr.splice(0, 1)
					this.isLoad = true
					return
				}
				await this.getDetail()
			},
			async getDetail() {
				let {
					id
				} = this.options
				let detail = await this.$api.mine.serviceInfo({
					id
				});
				// debugger
				detail.cover = [{path: detail.cover}]
				
				if(detail.imgs){
					for (var i = 0; i < detail.imgs.length; i++) {
						var item = detail.imgs[i]
						this.imgs_photo.push({path: item})
					}
				}
				for (let key in this.form) {
					this.form[key] = detail[key]
				}
				
				this.one_classid_name = detail.one_classid_name
				this.two_classid_name = detail.two_classid_name
				
				this.isLoad = true
				
				this.$util.hideAll()
			},
			async colChange(e) {
				// 第一列，选择第一分类
				if (e.detail.column == 0) {
					let list = await this.$api.service.classList({
						class_id: this.classList[0][e.detail.value].id
					});
					// debugger
					this.form.one_classid = this.classList[0][e.detail.value].id
					this.one_classid_name = this.classList[0][e.detail.value].name
					this.classList[1] = list
					// 强制视图更新
					this.$set(this.classList, 1, list)
				}
				// 第二列，选择第二分类
				if (e.detail.column == 1) {
					// 选中二级分类id
					this.form.two_classid = this.classList[1][e.detail.value].id
					this.two_classid_name = this.classList[1][e.detail.value].name
					// debugger
				}
			},
			technicianChange: function(evt) {
				var objectA = {}
				var arr = []
				for (let i = 0; i < this.technicianList.length; i++) {
					for (let j = 0; j < evt.target.value.length; j++) {
						if (this.technicianList[i].coach_name === evt.target.value[j]) {
							var objectB = this.technicianList[i];
							this.$set(objectA, evt.target.value[j], objectB)
							arr.push(this.technicianList[i].id)
							break;
						}
					}
				}
				this.form.coach = arr
				this.selectedItem = objectA;
				// debugger
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				console.log(imagelist, e, "=====imgUpload")
				this.form[imgtype] = imagelist;
			},
			imgUpload2(e) {
				let {
					imagelist,
					imgtype,
					index
				} = e;
				console.log(imagelist, e, "=====imgUpload22")
				this.imgs_photo = imagelist
			},
			async toDel() {
				let [res_del, {
					confirm
				}] = await uni.showModal({
					title: '提示',
					content: "请确认是否要删除此数据?"
				})
				if (!confirm) return;
				let {
					id
				} = this.form
				let {
					check_id
				} = this.$util.getPage(-1)
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.mine.serviceDel({
						id
					})
					this.$util.hideAll()
					this.$util.showToast({
						title: `删除成功`,
					});
					this.lockTap = false
					setTimeout(() => {
						this.$util.back()
						this.$util.goUrl({
							url: 1,
							openType: `navigateBack`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name,
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				return message;
			},
			async submit() {
				let param = this.$util.deepCopy(this.form)
				let msg = this.validate(param)
				if (msg) {
					this.$util.showToast({
						title: msg
					});
					return;
				}
				if(this.form.coach.length == 0){
					this.$util.showToast({
						title: '请先绑定服务'
					});
					return;
				}
				
				// debugger
				if(this.form.cover.length == 0){
					param.cover = ''
				} else {
					param.cover = this.form.cover[0].path
				}
				
				var imgs = []
				for (var i = 0; i < this.imgs_photo.length; i++) {
					var item = this.imgs_photo[i]
					imgs.push(item.path)
				}
				
				param.imgs = imgs
				
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					if (!this.id) {
						await this.$api.mine.serviceAdd(param)
					} else {
						param.id = this.id
						await this.$api.mine.serviceUpdate(param)
					}
					this.$util.hideAll()
					this.$util.showToast({
						title: `提交成功`,
					})
					setTimeout(() => {
						this.$util.back()
						this.$util.goUrl({
							url: 1,
							openType: `navigateBack`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.selectItem {
	        width: 100%;
	        margin-left: 0upx;
	        margin-top: 20upx;
	    }
</style>
